<template>
	<view>
		<view class="part">
			<view class="cos-img"><image :src="detail.images" class="cos-img" mode="widthFix"></image></view>
			<view class="msg">
				<view class="big-msg">{{detail.title}}</view>
			</view>
			<view class="mark">{{detail.intro}}”</view>
		</view>
		<view class="line" v-if="detail.sku.length>0"></view>
		<view class="goods-list"  v-if="detail.sku.length>0">
			<view class="tit">商品清单</view>
			<view class="sku-good" v-for="(item,key) in detail.sku" :key="key" @click="goGoodDetail(item.store_sku_id)">
				<image :src="item.image[0]" class="sku-img"></image>
				<view class="sku-msg">
					<view class="big-msg">{{item.name}}</view>
					<view class="spec">
						{{item.spec}}
					</view>
					<view class="num">数量：x{{item.amount}}</view>
				</view>
			</view>
		</view>
		
		<view class="empty-box"></view>
		<view class="footer-box">
			<view class="box box1">
				<image src="../../static/images/new-home.png" @click="goHome" class="home"></image>
				<image src="../../static/images/new-main.png" @click="goMain" class="main"></image>
			</view>
			<view class="box box2">
				<image src="../../static/images/yuyue.png" @click="goTell" class="yuyue"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:[]
			}
		},
		onLoad(e) {
			var self = this;
			this.$request.request({
				url:'/sample/detail',
				data:{
					template_room_id:e.id
				},
				success:function(res){
					if(res.code==200){
						var x = res.result;
						x.forEach((item,index)=>{
							x[index].images = self.$http_img(item.images);
							if(item.sku){
								item.sku.forEach((items,key)=>{
									items.image[0] = self.$http_img(items.image[0]);
								})
							}
						})
						self.detail = x[0];	
									console.log(self.detail)
					}else{
						
					}
				}
			});
		},
		methods: {
			goHome(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			goMain(){
				uni.switchTab({
				    url: '/pages/main/main'
				});
			},
			goTell(){
				uni.makePhoneCall({
				    phoneNumber: '13684076389'
				});
			},
			goGoodDetail(id){
				uni.navigateTo({
				    url: '../../pages/local-store-item/local-store-item?id='+id
				});
			}
		}
	}
</script>

<style scoped>
.cos-img{
	width: 750upx;
}
.msg{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding:0 16upx;
	font-size: 14px;
	color: #333333;
}
.big-msg{
	font-weight: bold;
}	

.mark{
	padding:0 16upx;
	font-size: 12px;
	color: #666666;
}
.line{
	width: 750upx;
	height: 10upx;
	background-color: #f0f0f0;
}
.goods-list{
	width: 750upx;
	padding: 10upx;
	box-sizing: border-box;
}
.tit{font-size: 14px;font-weight: bold;}
.sku-good{
	display: flex;
	flex-direction: row;
	margin-top: 20upx;
}
.sku-img{
	width: 350upx;
	height: 270upx;
}
.sku-msg{
	width: 360upx;
	height: 270upx;
	margin-left: 20upx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.spec,.num{font-size: 12px;}
.empty-box{
	width: 750upx;
	height: 90upx;
}
.footer-box{
	position:fixed;
	bottom: 0;
	left: 0;
	width: 750upx;
	height: 90upx;
	display: flex;
	flex-direction: row;
	z-index: 999;
}
.box{
	width: 375upx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.yuyue{
	width: 220upx;
	height: 50upx;
}
.home{
	width: 42upx;
	height: 74upx;
}
.main{
	width: 45upx;
	height: 72upx;
}
.box1{
	background-color: #c2ccd1;
}
.box2{
	background-color: #859dc2;
}
</style>
